<template>
	<app-layout @cek="receive(couponid, user_id)">
		<view class="give">
			<view class="content">
				<!-- <view class="avatar dir-left-nowrap main-center cross-center">
					<image :src="coupon.avatar"></image>
				</view>
				<view class="nickname">{{coupon.nickname}}</view> -->
				<view class="title">恭喜你获得一张</view>
				<view class="title"><text style="font-size: 56rpx;color: #CD9C62;">{{coupon.sub_price+'元'}}</text>{{coupon.name}}
				</view>
				<view class="title bt-receive" @click="receive(couponid, user_id)" v-if="recstatus == 0">
					点击领取
				</view>
				<view class="title received" v-if="recstatus == 1">
					已领取过
				</view>
				<view class="title received" v-if="recstatus == 2">
					抵用券数量不足
				</view>
				<view class="line">
					<image src="/static/image/icon/line.png"></image>
				</view>
				<view class="details">
					<view class="title">有效期</view>
					<view>领取后{{coupon.expire_day}}天内有效</view>
					<!-- <view class="title">使用规则</view>
					<view>
						本券仅限{{coupon.name}}抵用
					</view> -->
					<view class="dyqbtn" @click="todyq">
						查看我的抵用券
					</view>
				</view>
				<!-- <view class="time">仅限{{coupon.name+'品类'}}可抵用</view>
				<view class="time">有效期：领取后{{coupon.expire_day}}天有效</view> -->
				<!-- <view class="time">有效期：20020202 - 20200202</view> -->
			</view>
			<!-- <view class="user-list">
				<view class="title u-line-1">
					{{usersnum}}人已领取
				</view>
				<scroll-view scroll-y="true" class="user-list-s">
					<view>
						<view class="dir-left-nowrap cross-center user-list-li" v-for="(item,index) in userslist"
							:key="index">
							<view class="">
								<image class="image" :src="item.member.userInfo.avatar" mode=""></image>
							</view>
							<view class="">
								{{item.member.nickname}} 已领取
							</view>
						</view>
					</view>
					<view class="nopt" v-if="userslist.length == 0">
						暂无人领取
					</view>
				</scroll-view>
			</view> -->
		</view>
	</app-layout>
</template>

<script>
	import {
		mapGetters,
		mapState
	} from 'vuex';
	import AppRelatedSuggestionProduct
	from '../../../components/page-component/app-related-suggestion-product/app-related-suggestion-product';
	import appShareQrCode from '../../../components/page-component/app-share-qr-code-poster/app-share-qr-code-poster.vue';
	import jump from '../../../core/jump.js';
	export default {
		name: "give",
		components: {
			AppRelatedSuggestionProduct,
			appShareQrCode
		},
		data() {
			return {
				coupon: null,
				couponid: null,
				user_id: 0,
				img_finish_receiving: null,
				datares: '',
				recstatus: 0,
				userslist: [],
				usersnum: 0
			};
		},
		computed: {
			...mapState({
				couponImg: state => state.mallConfig.__wxapp_img.coupon,
				userInfo: state => state.user.info
			}),
			...mapGetters('mallConfig', {
				getTheme: 'getTheme',
			})
		},
		onLoad(options) {
			if (!this.$user.isLogin()) {
				this.$store.dispatch('user/accessToken')
			}
			// console.log(options, '*****');
			this.user_id = options.userid || null
			this.couponid = options.couponid || null
			this.coudetail(options.couponid)
			this.receive(options.couponid, options.userid);
		},
		methods: {
			todyq(){
				uni.navigateTo({
					url:'/pages/consumer/couponlist/couponlist'
				})
			},
			// 领取抵用券
			receive(couponid, userid) {
				if (this.$user.isLogin()) {
					// this.$showLoading();
					this.$request({
						url: this.$api.voucher.receive,
						method: 'post',
						data: {
							user_id: this.userInfo.options.user_id,
							id: couponid,
							coupon_num: 1
						}
					}).then(response => {
						if (response.msg == '领取成功' || response.msg == '已经领取') {
							this.recstatus = 1
							uni.showModal({
								title: response.msg,
								content: response.msg
							})
						} else {
							if (response.code == 1) {
								this.recstatus = 2
							}
							uni.showModal({
								title: response.msg,
								content: response.msg
							})
						}
					})
				} else {
					this.$store.dispatch('user/accessToken')
				}
			},
			coudetail(couponid) {
				this.$request({
					url: this.$api.voucher.detail,
					data: {
						id: couponid
					}
				}).then(response => {
					this.coupon = response.data.list
					// this.conusers(couponid)
					if (response.msg) {
						uni.showModal({
							title: response.msg,
							content: response.msg
						})
					}
				})
			},
			conusers(couponid) {
				this.$request({
					url: this.$api.voucher.list,
					data: {
						id: couponid
					}
				}).then(response => {
					// console.log(response);
					this.usersnum = response.data.pagination.total_count
					this.userslist = response.data.list
					uni.showModal({
						title: response.msg,
						content: response.msg
					})
				})
			}
		},
	}
</script>

<style scoped lang="scss">
	.give {
		background-color: #d6b985;
		width: #{750rpx};
		height: 100vh;
		padding: 24rpx 0;
	}

	.line {
		height: #{50rpx};
		margin: #{-1rpx} #{25rpx};
		background-color: #fff;

		image {
			height: 100%;
			width: 100%;
		}
	}

	.content {
		background-color: #ffffff;
		width: #{702rpx};
		// height: 100vh;
		margin: 0 auto;
		border-radius: 25rpx;
		padding-top: #{46rpx};
		padding-bottom: 40rpx;
		text-align: center;

		/*
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: center;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column; */
	}

	.avatar {
		width: #{130rpx};
		height: #{130rpx};
		margin: #{0 auto 30rpx auto};
		border-radius: #{130rpx};
		overflow: hidden;

		image {
			width: 100%;
			height: 100%;
			display: block;
		}
	}

	.nickname {
		font-size: $uni-font-size-general-one;
		line-height: 1;
	}

	.title {
		// margin-top: #{40rpx};
		font-size: 42rpx;
		line-height: 2;
	}

	.bt-receive {
		width: 204rpx;
		height: 60rpx;
		border-radius: 8rpx;
		text-align: center;
		border: 1rpx solid #000000;
		line-height: 60rpx;
		margin: 0 auto;
		font-size: 32rpx;
	}

	.received {
		width: 204rpx;
		height: 60rpx;
		border-radius: 8rpx;
		text-align: center;
		line-height: 60rpx;
		margin: 0 auto;
		font-size: 32rpx;
		color: #757575;
		background-color: #e8e8e8;
	}

	.pic {
		margin: #{90rpx auto 0 auto};
		width: #{636rpx};
		height: #{200rpx};
		padding: #{0 16rpx 0 24rpx};

		.coupon-left {
			width: #{174rpx};
			height: 100%;
			color: #ffffff;
			font-size: #{56rpx};

			.discount {
				&:after {
					content: '折';
					font-size: #{32rpx};
				}
			}

			.sub {
				&:before {
					content: '￥';
					font-size: #{32rpx};
				}
			}
		}

		.coupon-right {
			width: #{300rpx};
			height: 100%;
			font-size: $uni-font-size-import-two;

			.margin-top {
				margin-top: #{16rpx};
				font-size: $uni-font-size-general-one;
			}
		}
	}

	.time {
		// margin: #{45rpx 0};
		font-size: 32rpx;
		line-height: 2.7;
	}

	.card-btn {
		width: #{284rpx};
		height: #{76rpx};

		&.btn-1 {
			margin: #{410rpx auto 0 auto};
		}

		&.btn-0 {
			&:first-child {
				margin-right: #{38rpx};
			}
		}
	}

	.user-list {
		// // width: 100%;
		// // padding: 24rpx 96rpx;
		// width: 550rpx;
		// margin: -80rpx auto 24rpx;
		// background-color: #f9a006;
		// font-size: 24rpx;
		// padding: 24rpx;
		// border-radius: 12rpx;

		background-color: #FFFFFF;
		margin: 24rpx auto 0;
		font-size: 24rpx;
		padding: 24rpx;

		.title {
			font-size: 26rpx;
			line-height: 60rpx;
			// color: #FFFFFF;
			// border-bottom: 1rpx solid #FFFFFF;
			border-bottom: 1rpx solid #e8e8e8;
		}

		.user-list-s {
			// height: 720rpx;
			height: 54vh;
			// color: #FFFFFF;
			padding-top: 12rpx;
		}

		.user-list-li {
			height: 60rpx;
			// line-height: 60rpx;
			// height: 100rpx;
			// border-bottom: 1rpx solid #e8e8e8;
			// padding: 12rpx 16rpx;

			.image {
				width: 45rpx;
				height: 45rpx;
				border-radius: 50%;
				background-color: #7783EA;
				margin-right: 12rpx;
			}
		}
	}

	.nopt {
		text-align: center;
		line-height: calc(100vh - 702rpx);
		font-size: 24rpx;
	}

	.details {
		background-color: #fff;
		margin: #{-2rpx} #{25rpx} 0;
		font-size: #{28rpx};
		padding: #{25rpx} #{40rpx} #{65rpx};
		border-bottom-left-radius: #{25rpx};
		border-bottom-right-radius: #{25rpx};
		text-align: left;

		.dyqbtn {
			margin: 64rpx auto 0;
			color: #CD9C62;
			border: 1rpx solid #CD9C62;
			width: 320rpx;
			height: 78rpx;
			line-height: 78rpx;
			border-radius: 8rpx;
			text-align: center;
			font-size: 28rpx;
		}
	}

	.details .title {
		color: #b0b0b0;
		font-size: #{26rpx};
		margin-bottom: #{25rpx};
		margin-top: #{50rpx};
	}
</style>
